<template>
  <div class="container">
    <div class="header-box">
        <h3><span>质量评估报告</span></h3>
        <div style="padding: 10px;">
            <el-row :gutter="10">
                <el-col :span="8">
                <div class="box" style="height: auto;">
                    <h3>数据统计</h3>
                    <ul>
                        <li><span>校验字段数：</span>10</li>
                        <li><span>校验规则数：</span>9</li>
                        <li><span>数据总数：</span>10345条</li>
                        <li><span>问题数据：</span>4567条</li>
                        <li><span>合格率：</span>56%</li>
                        <li><span>报告日期：</span>2024-8-9</li>
                    </ul>
                </div>
                <div class="box" style="margin-top: 10px;height: auto;">
                    <h3>数据评价</h3>
                    <ul>
                        <li style="width: 100%;"><span>存在主要问题：</span>属性数据和属性数据模型一致，品牌字段缺失</li>
                        <li style="width: 100%;"><span>原因分析：</span>采集数据不符合编目规范</li>
                        <li style="width: 100%;"><span>处理建议：</span>通过整编修正问题</li>

                    </ul>
                </div>
                </el-col>
                <el-col :span="8">
                    <div class="box" >
                        <h3>得分统计</h3>
                        <div ref="myCharts_1"  class="echarts-box"></div>
                        <ol>
                            <li><i>1</i><span>值域校验</span>90</li>
                            <li><i>6</i><span>空值校验</span>50</li>
                            <li><i>2</i><span>正则校验</span>80</li>
                            <li><i>7</i><span>唯一性校验 </span>100</li>
                            <li><i>3</i><span>产品品种一致性校验</span>100</li>
                            <li><i>8</i><span>映射关系校验</span>100</li>
                            <li><i>4</i><span>基准名称一致性校验</span>90</li>
                            <li><i>9</i><span>关联模型一致性校验</span>80</li>
                            <li><i>5</i><span>属性数据一致性校验</span>70</li>
                            <li><i>10</i><span>一物多码校验</span>100</li>
                        </ol>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="box">
                        <h3>各维度分布</h3>
                        <div ref="myCharts_2"  class="echarts-box" style="width: 100%;"></div>
                    </div>
                </el-col>
            </el-row>
        </div>

        </div>
        <div class="main-box">
        <el-tabs type="border-card">
            <el-tab-pane label="评分详情">
                <el-table :data="tableData" border stripe size="mini" style="width: 100%">
                    <el-table-column type="index" label="编号" align="center" width="100"></el-table-column>
                    <el-table-column prop="name" label="数据元" align="center" width="180"></el-table-column>
                    <el-table-column prop="info" label="得分情况" align="center" ></el-table-column>
                    <el-table-column prop="type" label="备注" align="center" width="200"></el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane>
                <span slot="label">问题数据<i class="tag" style="background-color: #e6a23c;">0</i></span>
                <el-table :data="tableData" border stripe size="mini" style="width: 100%">
                    <el-table-column type="index" label="编号" align="center" width="100"></el-table-column>
                    <el-table-column prop="name" label="数据元" align="center" width="180"></el-table-column>
                    <el-table-column prop="info" label="得分情况" align="center" ></el-table-column>
                    <el-table-column prop="type" label="备注" align="center" width="200"></el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane>
                <span slot="label">质量告警<i class="tag">1</i></span>
                <el-tag type="danger">本次数据中超过50%的数据数据质量低于60分，低于编目数据平均标准</el-tag>
            </el-tab-pane>
        </el-tabs>
        <el-pagination background
                @size-change=""
                @current-change=""
                :current-page="1"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="10"
                layout="total, sizes, prev, pager, next, jumper"
                :total="16">
                </el-pagination>

    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import * as echarts from 'echarts';
export default {
  name: 'report',
  data() {
      return {
        active: 2,
        currentPage4: 1,
        tableData: [{
          name: '产品名称',
          info: '值域校验合格，计算得分95；   空值校验合格，计算得分80。',
          remark:'',
        },{
          name: '品种码',
          info: '值域校验合格，计算得分84；   空值校验合格，计算得分32；唯一性校验合格，计算得分100。',
          remark:'',
        },{
          name: '产品码',
          info: '值域校验合格，计算得分87；   空值校验合格，计算得分30；唯一性校验合格，计算得分100。产品品种一致性校验合格，计算得分100；一物多码即校验合格，积分100.',
          remark:'',
        },{
          name: '品牌',
          info: '值域校验合格，计算得分93；   空值校验合格，计算得分40；唯一性校验合格，计算得分100。产品品种一致性校验合格，计算得分100；一物多码即校验合格，积分100.',
          remark:'',
        },{
          name: '生产厂家',
          info: '值域校验合格，计算得分98；   空值校验合格，计算得分64。',
          remark:'',
        },{
          name: '规格型号',
          info: '值域校验合格，计算得分89；   空值校验合格，计算得分53。',
          remark:'',
        },{
          name: '计量单位',
          info: '值域校验合格，计算得分91；   空值校验合格，计算得分40。',
          remark:'',
        }]
      }
   },
   mounted() {
    let myChart_1 = echarts.init(this.$refs.myCharts_1);
    myChart_1.setOption({
      tooltip: {},
        series: [
            {
            name: '得分',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                show: true,
                fontSize: 18,
                fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data: [
                { value: 75, name: '75分' },
                { value: 25, name: '25分' }
            ]
            }]
    });
    let myChart_2 = echarts.init(this.$refs.myCharts_2);
    myChart_2.setOption({
      tooltip: {},
        radar: {
            // shape: 'circle',
            radius: '72%',
            nameGap: 8 ,
            indicator: [
                { name: '值域校验', max: 100 },
                { name: '空值校验', max: 100 },
                { name: '正则校验', max: 100 },
                { name: '唯一性校验', max: 100 },
                { name: '产品品种一致性校验', max: 100 },
                { name: '映射关系校验', max: 100 },
                { name: '基准名称一致性校验', max: 100 },
                { name: '关联模型一致性校验', max: 100 },
                { name: '属性数据一致性校验', max: 100 },
                { name: '一物多码校验', max: 100 }
            ]
        },
        series: [
            {
            name: 'Budget vs spending',
            type: 'radar',
            areaStyle: {},
            data: [
                {
                    value: [90, 50, 80, 100, 100, 100,90,80,40,100],
                    name: 'Allocated Budget'
                }
            ]
            }
        ]
    });
   }
}
</script>
<style lang="scss">

</style>
<style lang="scss" scoped>
    .header-box{
        background-color: #FFF;
        height: 100%;
        div.box{
            border: 1px solid #EBEEF5;
            position: relative;
            height: 253px;
            h3{
                font-size: 18px;
                padding-left:10px;
                border-bottom:none ;
                background-color: #EBEEF5;
            }
            ol{
                width: 60%;
                margin: 0;
                padding: 0;
                position: absolute;
                right: 0;
                top:80px;
                li{
                    display: inline-block;
                    width: 49%;
                    font-size: 14px;
                    line-height: 16px;
                    margin-bottom: 10px;
                    i{
                      display: inline-block;
                      width: 15px;
                      font-size: 8;
                      line-height: 15px;
                      color: #FFF;
                      text-align: center;
                      font-style:normal;
                      background-color: #144a74;
                      margin-right: 5px;
                    }
                    span{
                        display: inline-block;
                        width: 70px;
                        line-height: 15px;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        overflow-x: hidden;
                        vertical-align:bottom;
                    }
                }
            }
        }
        ul{
            margin: 0;
            padding-left: 20px;
            li{
                display: inline-block;
                width: 45%;
                font-size: 14px;
                color: #666;
                line-height: 30px;
            }
        }
    }
    .echarts-box{
        width: 40%;
        height: 230px;
    }
    .steps-box{
        width: 1000px;
        padding: 10px 20px;
        position:relative;
        margin-bottom: 20px;
        .bg{
            width: 100%;
            height: 200px;
            // margin-bottom: 30px;
            background:url("/bg.png") left top no-repeat;
            background-size:cover ;
        }
        .collapse2-box{
            width: 200px;
            height: 200px;
            border: 1px solid #EBEEF5;
            overflow:auto;
            position: absolute;
            right: 270px;
            top:20px;
        }
        .el-steps{
            width: 500px;
            margin-left: 300px;

        }
    }
    i.tag{
        display: inline-block;
        width: 20px;
        font-size: 8;
        line-height: 20px;
        color: #FFF;
        text-align: center;
        font-style:normal;
        background-color: #f56c6c;
        border-radius: 3px;
        margin-left: 5px;
    }
    .el-pagination{
        margin-top: 10px;
    }
</style>
